<template>
	<view>
		<view class="txtb mb30">
			<view class="bj_around mb30">
				<view class="txtb-txch bj_sx" v-for="(item , i) in tab" @click="chtx(i)">
					<view class="">
						{{item.name}}
					</view>

					<view :class="'txtb-txch-txcho' + (item.ch ? 'n' : 'ff')"></view>
				</view>
			</view>
			<view class="bj_between mb20">
				<view class="bj_between">
					<text style="margin-right: 10rpx;">{{$t("tx.tit1")}}</text>
					<image src="/static/hd/wh.png" style="width: 28rpx;" mode="widthFix"></image>
				</view>
				<view>
					<!--没有添加过卡号的按钮-->
					<view class="bj_between" v-if="!ifcar">
						<view class="txtb-btn1" @click="chcar">
							{{$t("tx.btn1")}}
						</view>
						<view class="txtb-btn2" @click="tosave">
							{{$t("tx.btn2")}}
						</view>
					</view>
					<view class="bj_between" v-if="ifcar">
						<view class="txtb-btn1" @click="chcar">
							{{$t("tx.btn5")}}
						</view>
					</view>

				</view>
			</view>
			<!--有卡号，显示出来-->
			<view class="" v-if="ifcar">
				<view class="bj_left mb20">
					<view class="f26 w20">
						TIPO
					</view>
					<view class="f26 ca2 fwb" v-if="info.wallet">
						{{info.wallet.type}}
					</view>
				</view>
				<view class="bj_left mb20">
					<view class="f26 w20">
						Nome
					</view>
					<view class="f26 ca2 fwb" v-if="info.wallet">
						{{info.wallet.name}}
					</view>
				</view>
				<view class="bj_left">
					<view class="f26 w20">
						CPF
					</view>
					<view class="f26 ca2 fwb" v-if="info.wallet">
						{{info.wallet.cpf}}
					</view>
				</view>
			</view>
			<!-- 没卡号，去添加 -->
			<view v-if="!ifcar">
				<picker class="txtb-inp bj_between" @change="bindPickerChange" :value="index" :range="array"
					style="color: #2AA22E;">
					<view class="uni-input">{{array[index]}}</view>
				</picker>
				<view class="txtb-inp bj_left">
					<view class="txtb-inp-tit" v-if="index == 1">
						+55
					</view>
					<input type="number" maxlength="30" v-model="form.wallet" @input="inpm"
						:placeholder="t('tx.inp2')" />
				</view>
				<view class="txtb-inp bj_left">

					<input type="number" maxlength="30" v-model="form.cpf" @input="inpm2" :placeholder="t('tx.inp3')" />
				</view>
				<view class="txtb-inp bj_left">

					<input type="text" maxlength="30" v-model="form.name" :placeholder="t('tx.inp4')" />
				</view>
			</view>

		</view>

		<view class="txtb-qqinfob mb20" v-if="tab[0].ch">
			<view class="bj_between mb30">
				<view class="bj_left">
					<text>{{$t("tx.tit5")}}</text>
					<image src="/static/page3/re.png" class="txtb-qqinfob-re" @click="winit"></image>
				</view>
				<view class="f32">
					{{$t("menu.$")}}
					{{user.user.money}}
				</view>
			</view>
			<view class="bj_between f24 mb20">
				<view class="">
					{{$t("tx.tit6")}}
				</view>
				<view class="">
					{{info.process}}%
				</view>
			</view>
			<view class="txtb-qqinfob-jdt mb20">
				<view class="txtb-qqinfob-jdt-jdtm" :style="'width: '+info.process+'%;'">

				</view>
			</view>
			<view class="bj_right">
				<view class="txtb-qqinfob-sbtn bj_center f24">
					<text>{{$t("tx.sbtn1")}}</text>
					<image src="/static/hd/wh.png"></image>
				</view>
			</view>
		</view>

		<view class="txtb-qqinfob2 bj_sx mb20" v-if="tab[1].ch">
			<view class="f32 mb20">
				{{$t("menu.$")}} {{user.user.bonus_money}}
			</view>
			<view class="f28">
				<text>{{$t("tx.tit9")}}</text>
			</view>
		</view>

		<view class="txtb-inpbox bj_left mb30">
			<image src="/static/gj/bxb.png" class="txtb-inpbox-gh"></image>
			<view class="txtb-inpbox-tit">
				BRL
			</view>
			<input type="number" v-model="form.brl" @input="inpm3" :placeholder="t('tx.inp5') + info.withdraw_minnum" />
		</view>

		<view class="bj_between f28 mb20">
			<view class="">
				{{$t("tx.tit7")}}{{info.withdraw_fee}}%
			</view>
			<view style="width: 60%;">
				{{$t("tx.tit8")}}{{$t("menu.$")}} {{money}}
			</view>
			<image src="/static/page3/op.png" :class="sjc" style="width: 28rpx;" mode="widthFix" @click="ops"></image>
		</view>

		<view v-if="shows">
			<view class="bj_between f24 ca2 mb10">
				<view class="">
					{{$t("cz.st1")}}
				</view>
				<view class="">
					{{info.withdraw_maxnum}}
				</view>
			</view>
			<view class="bj_between f24 ca2">
				<view class="">
					{{$t("cz.st2")}}
				</view>
				<view class="">
					10
				</view>
			</view>
		</view>


		<view class="mb50"></view>

		<view class="czbtn mb20" @click="totx">
			{{$t("tx.btn3")}}
		</view>
		<view class="tc f24" @click="opgc">
			{{$t("tx.btn4")}}
		</view>


		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>

		<zero-loading type="surround" v-if="loading"></zero-loading>
	</view>
</template>

<script setup>
	import {
		ref,
		inject
	} from 'vue';
	import useI18n from '@/store/useI18n.js'
	const {
		t
	} = useI18n()

	const opgc = inject("opgc");
	let array = ref([
		"CPF", "MOBILE", "EMAIL", "CNPJ"
	])
	let ifcar = ref(false)
	let index = ref(0)
	let money = ref(0)
	let loading = ref(false)
	let message = ref(null)
	let messageText = ref("")
	let msgType = ref("")
	let tab = ref([{
			name: t("tx.ch1"),
			ch: false
		},
		{
			name: t("tx.ch2"),
			ch: false
		}
	])


	let form = ref({
		name: "",
		wallet: "",
		cpf: "",
		type: "",
		brl: ""
	})
	let shows = ref(false)
	let sjc = ref("")
	import {
		onShow
	} from "@dcloudio/uni-app"
	import common from '../../js/common';
	let info = ref({})
	let user = ref({})

	onShow(function() {
		uni.setLocale('pt');
		chtx(0)
		winit()
	})

	function chcar() {
		if (ifcar.value) {
			ifcar.value = false
		} else {
			ifcar.value = true
		}
	}

	function winit() {
		loading.value = true
		common.getMinLoginUser({}, {
			"token": getApp().globalData.userInfo.token
		}).then(res => {
			if (res.statusCode == 200 && res.data.success) {
				getApp().globalData.userInfo.user = res.data.user
			}
		})
		common.withdrawIinit().then(res => {
			info.value = res.data.data
			user.value = getApp().globalData.userInfo
			if (info.value.wallet && info.value.walletid > -1) {
				ifcar.value = true
			} else {
				ifcar.value = false
			}
			loading.value = false

		})
	}

	function ops() {
		if (shows.value) {
			shows.value = false
			sjc.value = "szdh2"
		} else {
			shows.value = true
			sjc.value = "szdh1"
		}
	}

	function chtx(v) {
		for (var i = 0; i < tab.value.length; i++) {
			tab.value[i].ch = false
		}
		tab.value[v].ch = true
	}

	function inpm(e) {
		form.value.wallet = e.detail.value.replace(/[^\d]/g, '');
	}

	function inpm2(e) {
		form.value.cpf = e.detail.value.replace(/[^\d]/g, '');
	}

	function inpm3(e) {
		form.value.brl = e.detail.value.replace(/[^\d]/g, '');
		let tm = Number(form.value.brl) * (1 - Number(info.value.withdraw_fee) / 100)
		money.value = tm.toFixed(2)
	}

	function totx() {
		// if (money.value > Number(user.value.user.money) ||
		// 	money.value > Number(info.value.withdraw_maxnum)) {
		// 	msgType.value = "error"
		// 	messageText.value = "Valor excede o limite máximo."
		// 	message.value.open()
		// 	return
		// }
		// if (money.value < Number(info.value.withdraw_minnum)) {
		// 	msgType.value = "error"
		// 	messageText.value = "Valor abaixo do mínimo permitido."
		// 	message.value.open()
		// 	return
		// }

		if (!info.value.wallet || info.value.walletid == -1) {
			msgType.value = "error"
			messageText.value = "Adicione os dados da conta bancária."
			message.value.open()
			return
		}
		if (loading.value) {
			return
		}
		loading.value = true
		common.withdraw({
			type: tab.value[0].ch ? '1' : '2',
			money: money.value,
			walletid: info.value.walletid
		}).then(res => {
			messageText.value = res.data.message
			if (res.data.success) {
				msgType.value = "success"
			} else {
				msgType.value = "error"
			}
			message.value.open()
			loading.value = false
		})
	}

	function bindPickerChange(e) {
		index.value = e.detail.value;
	}

	function tosave() {
		if (form.value.wallet == "") {
			msgType.value = "error"
			messageText.value = "Por favor, introduza a Conta Bancária."
			message.value.open()
			return
		}
		if (form.value.cpf == "") {
			msgType.value = "error"
			messageText.value = "Por favor, introduza o CPF da conta."
			message.value.open()
			return
		}
		if (form.value.name == "") {
			msgType.value = "error"
			messageText.value = "Por favor, introduza o Nome da Conta."
			message.value.open()
			return
		}
		if (loading.value) {
			return
		}
		loading.value = true
		// console.log(array.value[index.value]);
		form.value.type = array.value[index.value]
		common.cardAdd(form.value).then(res => {
			messageText.value = res.data.message
			if (res.data.success) {
				msgType.value = "success"
				winit();
			} else {
				msgType.value = "error"
			}
			message.value.open()
			loading.value = false

		})
	}
</script>

<style scoped lang="scss">
	.txtb {
		background: linear-gradient( 180deg, #007628 0%, #177747 100%);
		border-radius: 20rpx;
		padding: 28rpx 20rpx;

		&-qqinfob {
			height: 256rpx;
			background: url("/static/page3/txb.png") no-repeat center center;
			background-size: 100% 100%;
			padding: 36rpx 24rpx 0;

			&-sbtn {
				width: 112rpx;
				height: 36rpx;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 100rpx;

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}

			&-re {
				width: 32rpx;
				height: 32rpx;
			}

			&-jdt {
				background: #003311;
				height: 20rpx;
				position: relative;
				border-radius: 100rpx;

				&-jdtm {
					background: #FFBE32;
					height: 20rpx;
					position: absolute;
					border-radius: 100rpx;
					left: 0;
					top: 0;
				}
			}
		}

		&-qqinfob2 {
			height: 140rpx;
			background: url("/static/page3/txb2.png") no-repeat center center;
			background-size: 100% 100%;
		}

		&-btn1 {
			width: 120rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			font-size: 24rpx;
			background: #2AA22E;
			border-radius: 8rpx;
			margin-right: 8rpx;
		}

		&-btn2 {
			width: 120rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			font-size: 24rpx;
			background: #FFBE32;
			border-radius: 8rpx;
		}

		&-inp {
			height: 88rpx;
			background: #003311;
			border-radius: 12rpx;
			border: 2rpx solid #177846;
			padding-left: 24rpx;
			margin-bottom: 20rpx;

			&-tit {
				width: 90rpx;
				border-right: 2rpx solid #1D528B;
				margin-right: 30rpx;
			}

			input {
				font-size: 28rpx;
			}
		}

		&-txch {
			padding-bottom: 10rpx;
			font-size: 32rpx;
			font-weight: bold;

			&-txchon {
				width: 48rpx;
				height: 8rpx;
				background: #FFFFFF;
				border-radius: 100rpx;
			}

			&-txchoff {
				width: 48rpx;
				height: 8rpx;
			}
		}

		&-inpbox {
			height: 88rpx;
			background: #001F0A;
			border-radius: 12rpx;
			border: 2rpx solid #097634;
			padding-left: 26rpx;

			&-gh {
				width: 56rpx;
				height: 56rpx;
				margin-right: 10rpx;
			}

			&-tit {
				width: 90rpx;
				border-right: 2rpx solid #1D528B;
				margin-right: 30rpx;
			}

			input {
				width: 65%;
			}
		}
	}

	.czbtn {
		height: 88rpx;
		line-height: 88rpx;
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		background: linear-gradient( 180deg, #00802B 0%, #06C045 100%);
		border-radius: 12rpx;
	}
</style>